{extend name="public/base" /}
{block name="style"}
	<link href="__CSS__/cash.css" rel="stylesheet">	
{/block}
{block name="body"}
<div class="content-tabs">
	<ol class="breadcrumb">
		<li>
			<a href="{:url('index/index')}"><i class="fa fa-home"></i></a>
		</li>
		<li><strong>短信充值</strong></li>
	</ol>
</div>
<div class="ibox float-e-margins">
	<div class="ibox-content">
		<form id="myForm" class="form-horizontal m-t" method="post" action="{:url('index')}">	
			<div class="cl s-height" data-s-height="true" style="height: 252px;">
			<label class="width-100 left">购买数量</label>
			<div class="" >
				<ul class="nav hs_nav pay_method" >
					<li id="hou_li" data-id="1" data-price="90" data-count="1000" >
						<p style="padding-top:30px;font-size: 16px;color: #2B303A;font-weight: 600;"><span >1000条</span></p>
						<p style="padding-top:10px;font-size: 16px;"><span id="yfprice">90元</span></p>
					</li>
					<li id="hou_li" data-id="2" data-price="260" data-count="3000">
						<p style="padding-top:30px;font-size: 16px;color: #2B303A;font-weight: 600;"><span >3000条</span></p>
						<p style="padding-top:10px;font-size: 16px;"><span >260元</span></p>
					</li>
					<li id="hou_li" data-id="3" data-price="400" data-count="5000">
						<p style="padding-top:30px;font-size: 16px;color: #2B303A;font-weight: 600;"><span >5000条</span></p>
						<p style="padding-top:10px;font-size: 16px;"><span >400元</span></p>
					</li>
					<li id="hou_li" data-id="4" data-price="750" data-count="10000">
						<p style="padding-top:30px;font-size: 16px;color: #2B303A;font-weight: 600;"><span >10000条</span></p>
						<p style="padding-top:10px;font-size: 16px;"><span >750元</span></p>
					</li>
				</ul>
					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<label  style="padding-left: 25px;">账户余额：<span id='balance'>{$store_balance}</span>剩余短信条数：<span id='count'>{$smscount}</span></label>
					</div>
					<div class="form-group">
						<div class="col-sm-4 col-sm-offset-10">
							<input type="hidden" name="smsid" id="smsid" value=""/>
							<input type="hidden" name="smsprice" id="smsprice" value=""/>
							<input type="hidden" name="smscount" id="smscount" value=""/>
							<button class="btn btn-primary" type="button" onclick="smsgm()"><i class="fa fa-save"></i> 购买</button>
						</div>
					</div>
			</div>
		</form>
	</div>
</div>
{/block} {block name="script"}
<script src="__JS__/jquery.form.js"></script>
<script src="__LIB__/validate/jquery.validate.min.js"></script>
<script src="__LIB__/validate/messages_zh.min.js"></script>
<script src="__LIB__/validate/add_validate.min.js"></script>
<script>
	 $(".hs_nav li").click(function(){
    	$(".room-selected").removeClass("room-selected");
    	var id = $(this).attr("data-id");
    	var price = $(this).attr("data-price");
    	var count = $(this).attr("data-count");
		$("input[name='smsid']").attr("value",id);
		$("input[name='smsprice']").attr("value",price);
		$("input[name='smscount']").attr("value",count);
    	$(this).addClass("room-selected");
  });
  
  function smsgm(){
	var smsid=$("#smsid").val();
	var smsprice=$("#smsprice").val();
	var smscount=$("#smscount").val();
	if(smsid==""){
		layer.msg("请选择短信购买数量!");
		return false;
	}
  
  
  	$.ajax({
	  	type:"post",
	  	url:"smsgm",
	  	data:{smsid:smsid,smsprice:smsprice,smscount:smscount},
	  	success: function(data) {
	  		var datas = data.data;
	  		layer.msg(data.msg);
	  		if(data.code == 200){
	  			$("#count").text(datas.smscount);
	  			$("#balance").text(datas.store_balance);
	  		}
	  	}
  	});
  
  }
</script>
<script>
		$(function() {
		$("#myForm").validate({
			rules: {
				
			},
			messages: {
			
			},
			submitHandler: function(form) {
				ajaxForm();
			}
		});
	});
</script>
<style>
.bank{
	width: 150px;
    height:30px;
    text-align:center;
    border-radius:5px;
}
</style>
{/block}